<template>
	<view class="common">
		<view class="an-map">
			<view>develop1</view>
			<view>develop2</view>
			<map subkey="FKXBZ-MVL3J-MY7FZ-F4IJQ-BD7W7-RSBDO"
				:latitude="latitude" 
				:longitude="longitude" 
				:markers="covers" 
				:show-location='true' >
				<cover-view class="an-ico-box an-btn-info" @click="clickRefresh()">
					<cover-image class="controls-pause" src="../../static/img/refresh.png"></cover-image>
				</cover-view>
				<!-- <cover-view class="an-ico-box an-btn-msg" >
					<button class='contact-btn' open-type='contact'><cover-image class="controls-pause" src="../../static/content.png"></cover-image></button>
				</cover-view> -->
				<cover-view class="an-map-btn">
					<button open-type="getUserInfo" v-if="isShowlogin" class="an-btn-box an-getUserInfo-btn" @getuserinfo="getuserinfoBtn" > 
						<cover-view class="an-btn-click">{{btnTxt}}</cover-view>
					</button>
					<cover-view class="an-btn-box" v-else @click="anClick">
						<cover-view class="an-btn-click">{{btnTxt}}</cover-view>
					</cover-view>
				</cover-view>
			</map>
		</view>
		
		<an-sign-popup ref="anSignPopup" :signNumber="signNumber" :address="address" @callBack="popupCallBack"></an-sign-popup>
		
	</view>
</template>

<script>
	const util = require('@/common/util.js');
	import {mapState,mapMutations,mapActions} from 'vuex'
	import anSignPopup from "@/components/an-sign-popup.vue"
	export default {
		components:{anSignPopup},
		data() {
			return {
				btnTxt:'打卡',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				isLocation: false,  //是否定位成功
				address:'',
				isCuntBtn: 0, //打卡点击次数
				signNumber: -1,  // 当日打卡次数  初始状态未查询 -1
				isShowPopup: false // 弹框是否渲染
			}
		},
		computed: {
			...mapState(['userInfo','authSetting']),
			// 用户信息是否为空
			isEmptyUserInfo(){
			  return util.isEmptyValue(this.userInfo)
			},
			// 是否有授权获取用户信息
			isShowlogin(){
				return this.authSetting['scope.userInfo']?false:true
			},
		},
		onLoad() {
			this.anLoad()
			uni.showShareMenu() // 显示转发
		},
		methods: {
			...mapMutations(['setUserInfo','setAuthSetting','setIsRefresh']),
			...mapActions(['getSetting','getUserInfo']),
			anLoad(){
				let _this = this
				this.getSetting().then(res=>{ // 查询是否授权获取定位
					if(res['scope.userLocation']){
						// 获取定位信息
						_this.getAddress()
					}else{
						uni.authorize({
							scope: 'scope.userLocation',		//申请用户授权 获取定位
							success() {
								// 获取定位信息
								_this.getAddress()
							},
							fail(e) {
								_this.isLocation = false // 定位失败
							}
						})
					}
				})
				this.getSignNumber();
			},
			
			clickRefresh(){	//手动刷新 按钮
				this.anLoad()
				// 查询当日打卡数
				this.getSignNumber();
				this.$refs.anSignPopup.cancel();
			},
			
			getSignNumber(){ // 查询当日打卡数
				this.$api.selectDataTime().then(res=>{
					this.signNumber = res.code
				})
			},
			
			getAddress(){	// 获取定位
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						let markers = [
							  {
								id: 0,
								iconPath: "../../static/img/address.png",
								longitude: res.longitude,
								latitude: res.latitude,
								width: 30,
								height: 39
							  }
							]
						_this.covers = markers
						_this.anQQmapaddress(res.latitude, res.longitude)
					}
				});
			},
			
			getuserinfoBtn(e){  //授权弹按钮回调事件，获取用户信息
				// 授权成功
				if(e.detail.userInfo){
					//将用户信息存储 在store
					this.setUserInfo(e.detail.userInfo)
					let _this = this
					uni.getSetting({  // 重新获取授权列表
					   success(res) {
						   // 更新授权列表
						  _this.setAuthSetting(res.authSetting)
					   }
					})
					// 打卡
					this.anClick()
				}else{
					// 授权失败
					return uni.showToast({
						title: "获取信息失败",
						image: "../../static/img/logo.png"
					})
				}
			},
			// 打卡
			anClick() {	
				if(this.isLocation){
					// 定位成功
					if(this.signNumber >= 0){
						// 查询打卡次数完毕
						if(this.signNumber<3){
							this.anWXsign()
						}else{
							uni.showToast({
								title: "今日已打卡3次",
								image: "../../static/img/logo.png"
							})
						}
					}
				}else{
					uni.showToast({
						title: "定位失败",
						image: "../../static/img/logo.png"
					})
				}
			},
			anWXsign(){ //发送打卡信息
				//防抖
				if(this.isCuntBtn == 1){
					return
				}
				this.isCuntBtn = 1
				uni.showLoading({ title: '加载中'})
				let params = {
				  address: this.address, 
				  longitude: this.longitude,
				  latitude: this.latitude,
				}
				this.$api.addSing(params).then(res=>{
					uni.hideLoading()
					this.isShowPopup = true;
					this.$refs.anSignPopup.openPopup();
					this.anLogin() 
					this.setIsRefresh(true)  // 刷新列表数据
					this.getSignNumber() // 更新打卡次数
				})
			},
			// 弹框关闭回调
			popupCallBack(){
				this.isCuntBtn = 0
			},
			
			anLogin(){	// 用户登录
				this.getUserInfo().then(res=>{
					let nd = {
						nickname:res.nickName,
						avatarurl:res.avatarUrl,
						gender:res.gender,
						city:res.city
					}
					this.$api.loginSing(nd)
				})
			},
			
			anQQmapaddress(la,lo) {
				uni.showLoading({ title: '加载中'})
				var _this = this;
				// 引入SDK核心类
				var QQMapWX = require('../../common/qqmap-wx-jssdk.min.js');
				// 实例化腾讯地图API核心类
				var qqmapsdk = new QQMapWX({
				  key: 'FKXBZ-MVL3J-MY7FZ-F4IJQ-BD7W7-RSBDO' // 必填
				});
				//2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
				qqmapsdk.reverseGeocoder({
				  location: {
					latitude: la,
					longitude: lo
				  },
				  success: function (res) {
					uni.hideLoading()
					_this.isLocation = true
					_this.address = res.result.address
					//console.log('返回地理位置：'+res.result.address);
				  }
				})
			},
		}
	}
</script>

<style>
	.an-map-btn{
		display: flex;
		flex-direction: column;
		justify-content:space-between;
		text-align: center;
		position: absolute;
		bottom: var(--window-bottom);
		left:50%;
		margin-left: -110upx;
	}
	.an-btn-box{
		width: 220upx;
		height: 220upx;
		margin: 0 auto;
		margin-bottom: 80upx;
		border-radius: 50%;
		display: flex;
		justify-content:center;
		background-color: rgba(250,119,73,0.2);
	}
	.an-getUserInfo-btn{
		/*border: none;*/
	}
	.an-btn-click{
		color: #ffffff;
		width: 180upx;
		height: 180upx;
		margin: 20upx;
		line-height: 180upx;
		border-radius: 50%;
		font-size: 48upx;
		background-color: rgba(250,119,73,1);
	}
	.an-btn-msg{
		top:120upx;
		right:20upx;
	}
	.contact-btn{
		display: inline-block;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content:center;
		align-items:center;
		background-color:rgba(0,0,0,0); 
		border: none;
	}
	
	
</style>
